<template>
  <view class="container1">
    <van-icon class="maxIcon" name="arrow-left" @click="onmaxIcon" />
    <view class="maxImage">
      <swiper>
        <swiper-item v-if="product.sliderImgs" v-for="(item,i) in product.sliderImgs" :key="i">
          <image :src="item" mode="widthFix" style="width: 100%;"></image>
          <view class="maxback"></view>
        </swiper-item>
      </swiper>
    </view>

    <view class="userInfo">
      <!-- 自我介绍 -->
      <view class="userInfo_box">
        <view class="userInfo_box_left">
          <image :src="product.previewImage" mode="aspectFill"></image>

          <image v-if="product.sex === '0'" src="@/static/images/mine/nan.png" mode="aspectFill" class="minImage">
          </image>
          <image v-else src="@/static/images/mine/nv.png" mode="aspectFill" class="minImage"></image>

          <view class="userInfo_box_left_box">
            <h1>{{product.productName}}</h1>
            <text>{{product.categoryName}}</text>
          </view>
        </view>
        <view class="userInfo_box_right" @click="onJoiner" v-if="!product.isJoined">
          加入
        </view>
      </view>

      <view class="userInfo_score">
        <view class="userInfo_score_left">
          <h1>{{product.score}}</h1>
          <van-rate readonly style="margin: 26rpx 0 16rpx;" void-color="#e2e2e2" allow-half void-icon="star"
            :value="product.score" />
          <text>{{product.scores}}人评分</text>
        </view>
        <view class="userInfo_score_right">
          <view class="userInfo_score_right_top">
            <van-rate color="rgba(61, 61, 61, 0.2)" count="5" size="10" readonly :value="5" />
            <tui-progress activeColor="rgba(253, 211, 56, 1)" :percent="product.fivePercent" show-info size="0">
            </tui-progress>
          </view>

          <view class="userInfo_score_right_top">
            <van-rate color="rgba(61, 61, 61, 0.2)" count="4" size="10" readonly :value="4" />
            <tui-progress activeColor="rgba(253, 211, 56, 1)" :percent="product.fourPercent" show-info size="0">
            </tui-progress>
          </view>
          <view class="userInfo_score_right_top">
            <van-rate color="rgba(61, 61, 61, 0.2)" count="3" size="10" readonly :value="3" />
            <tui-progress activeColor="rgba(253, 211, 56, 1)" :percent="product.threePercent" show-info size="0">
            </tui-progress>
          </view>
          <view class="userInfo_score_right_top">
            <van-rate color="rgba(61, 61, 61, 0.2)" count="2" size="10" readonly :value="2" />
            <tui-progress activeColor="rgba(253, 211, 56, 1)" :percent="product.twoPercent" show-info size="0">
            </tui-progress>
          </view>
          <view class="userInfo_score_right_top">
            <van-rate color="rgba(61, 61, 61, 0.2)" count="1" size="10" readonl :value="1" />
            <tui-progress activeColor="rgba(253, 211, 56, 1)" :percent="product.onePercent" show-info size="0">
            </tui-progress>
          </view>
        </view>
      </view>
      <text class="userInfo_score_text">{{product.buyers}}人想买</text>
      <!-- 点评 -->
      <view class="userInfo_review paddingleft">
        <view class="userInfo_review_title">
          <h1>点评 {{reviewList.length}}</h1>
          <!-- <view class="userInfo_review_text">
						<text :class="activeShow == 0?'active' : ''" @click="onhottestShow">最热</text>
						<text style="margin: 15rpx;">·</text>
						<text :class="activeShow == 1?'active' : ''" @click="onlatestShow">最新</text>
					</view> -->
        </view>

        <view class="userInfo_review_box" v-if="reviewList.length > 0">
          <block v-for="(item,i) in reviewList" :key="i">
            <userIntroduced :productNameShow="false" :conditionItem="item" @onfollowed="onFollowed"
              @onlikeShow="onLiked($event,'followed')">
            </userIntroduced>
          </block>
        </view>

        <view class="Myactive_box_no" v-if="reviewList.length == 0">
          <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
          <text>还没发布任何点评，快去发表一篇吧！</text>
        </view>
      </view>
    </view>
    <!-- 悬浮 -->

    <block v-if="product.categoryId">
      <userSuspension :circleId="product.categoryId" :circleName="product.categoryName" :productId="product.id"
        :productName="product.productName" :price="product.price" :productPreviewImage="product.previewImage">
      </userSuspension>
    </block>

    <view class="money">
      <view class="money_left">
        ￥<text style="font-size: 60rpx;font-weight: bold;">{{product.price}}</text>起
      </view>
      <view class="money_right" @click="onHave" v-if="!product.isHave">
        我想买
      </view>
      <view class="money_right1" v-if="product.isHave">
        已想买
      </view>
    </view>
  </view>
</template>

<script>
  // import userFocus from '@/components/user_focus.vue'
  import userIntroduced from "@/components/user_introduced/user_introduced.vue"
  import userSuspension from "@/components/user_suspension/user_suspension.vue"
  import {
    mapGetters
  } from "vuex";
  import {
    detail
  } from "@/api/product.js";
  import {
    page
  } from "@/api/article.js";
  import {
    behaviorBuying,
    behaviorJoiner
  } from "@/api/community.js";

  export default {
    data() {
      return {
        id: 0, //商品id
        categoryId: 0,
        current: 1,
        size: 10,
        total: 0,
        Myactive: 0,
        ratevalue: 5,
        // 最热 最火
        activeShow: 0,
        product: [],
        reviewList: []
      };
    },
    components: {
      userIntroduced,
      // userFocus,
      userSuspension
    },
    computed: {

    },
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: this.product.productName,
        path: '/subpkg/productdetails/productdetails?userId=' + this.userInfo.id + '&id' + this.product.id,
        imageUrl: this.product.previewImage
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: this.product.productName,
        path: '/subpkg/productdetails/productdetails?userId=' + this.userInfo.id + '&id' + this.product.id,
        imageUrl: this.product.previewImage
      };
    },
    computed: {
      ...mapGetters('m_user', ['isLogin', 'userInfo'])
    },
    watch: {
      isLogin: {
        handler: function(newV, oldV) {
          if (newV == true) {
            this.current = 1,
              this.size = 10,
              this.total = 0,
              this.reviewList = [];

            this.getDetails();
            this.getReviewList();
          }
        },
        deep: true
      }
    },
    onLoad(options) {
      uni.report('ClickontheProductLabel', '点击产品标签');
      let that = this;
      this.id = options.id;
      //扫码携带参数处理
      // #ifdef MP
      if (options.scene) {
        let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
        if (value.id) options.id = value.id;
        //记录推广人uid
        if (value.pid) app.globalData.spid = value.pid;
      }
      if (!options.id) {
        return this.$util.Tips({
          title: '缺少参数无法查看详情'
        }, {
          tab: 3,
          url: 1
        });
      } else {
        this.id = options.id
      }
      //记录推广人
      if (options.spid) app.globalData.spid = options.spid;
      // #endif

      this.getDetails();
      this.getReviewList()
    },
    // 触底的事件
    onReachBottom() {
      if (this.current * this.size >= this.total) {
        return;
      }
      // 圈子触底
      this.current++;
      this.getReviewList()
    },
    methods: {
      onmaxIcon() {
        uni.navigateBack()
      },
      onChangeMyactive() {

      },
      onconcealClose(e) {
        this.concealshow = false
      },
      // 跳转
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      onrateChange(e) {
        this.ratevalue = e.detail
      },
      onhottestShow() {
        this.activeShow = 0
      },
      onlatestShow() {
        this.activeShow = 1
      },
      onFollowed(res) {
        this.reviewList.forEach((item) => {
          if (item.createUser === res.createUser) {
            item.followed = !res.followed;
          }
        });
      },
      onLiked(res, type) {
        this.reviewList.forEach((item) => {
          if (item.id === res.id) {
            item.isLiked = !res.isLiked
            if (item.isLiked) {
              item.likes += 1
            } else {
              if (item.likes > 0) {
                item.likes -= 1
              }
            }
          }
        });
      },
      onHave() {
        //0 想买 1 买过
        behaviorBuying(this.id, 0).then(res => {
          if (res.success) {
            // console.log(res)
            this.product.buyers += 1
            this.product.isHave = true
          }
        });
      },
      onJoiner() {
        //0 圈子  1 产品  2活动
        behaviorJoiner(this.id, 1).then(res => {
          this.product.isJoined = !this.product.isJoined;
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        });
      },
      /**
       * 获取产品详情
       */
      getDetails: function() {
        let that = this;
        detail(that.id).then(res => {
          res.data.sliderImgs = res.data.sliderImgs.split(',')
          that.$set(that, 'product', res.data);
          console.log(res.data)
        }).catch(err => {
          //状态异常返回上级页面
          return that.$util.Tips({
            title: err.toString()
          }, {
            tab: 3,
            url: 1
          });
        })
      },
      getReviewList: function() {
        let that = this;
        page(that.categoryId, that.id, -1, that.current).then(res => {
          if (that.current === 1) {
            that.$set(that, 'size', res.data.size);
            that.$set(that, 'total', res.data.total);
          }
          res.data.records.forEach(item => {
            if (item.sliderImgs) {
              item.sliderImgs = item.sliderImgs.split(',')
            }
          })
          that.$set(that, 'reviewList', [...that.reviewList, ...res.data.records]);
        }).catch(err => {
          //状态异常返回上级页面
          return that.$util.Tips({
            title: err.toString()
          }, {
            tab: 3,
            url: 1
          });
        })
      }
    }
  }
</script>

<style lang="scss">
  page {

    swiper {
      width: 100%;
      height: 100%;
    }

    /deep/ .tui-progress__box {
      width: 150rpx !important;
      margin-top: 9rpx;
      margin-left: 30rpx;
    }

    /deep/ .tui-progress__percent {
      width: 0 !important;
    }

    // background-color: #5C8DFF;
    /deep/ .van-dialog__header {
      padding: 100rpx 0px !important;
    }

    /deep/ .van-popup {
      overflow: hidden;
    }

    .concealshow {
      .van-cell {
        padding-left: 95rpx !important;
        height: 33.33% !important;

        .van-cell__title {
          font-size: 30rpx;
          line-height: 64rpx;
        }

        .iconfont {
          position: absolute;
          top: 50%;
          left: 40rpx;
          transform: translate(0, -50%);
          font-size: 36rpx;
        }
      }
    }

    .informshow {
      /deep/ .van-cell {
        height: 16% !important;

        /deep/ .van-cell__title {
          font-size: 34rpx;
          line-height: 64rpx;
        }
      }

      .informshow_float {
        position: absolute;
        top: 60rpx;
        left: 45rpx;
      }

      .informshow_return {
        text-align: center;
        padding: 53rpx 45rpx;
        font-size: 40rpx;
        // align-items: center;
        // justify-content: center;
        border-bottom: 1px solid rgba(241, 241, 241, 1);
      }
    }


    /deep/ .van-cell {
      align-items: center;

      /deep/ .van-cell__title {
        font-size: 34rpx;
        line-height: 64rpx;
      }
    }

    .padding_left_right {
      padding-left: 24rpx;
      padding-right: 24rpx;
      box-sizing: border-box;
    }

    /deep/.uni-scroll-view ::-webkit-scrollbar {
      /* 隐藏滚动条，但依旧具备可以滚动的功能 */
      display: none;
      width: 0;
      height: 0;
      color: transparent;
      background: transparent;
    }

    /deep/::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
      background: transparent;
    }

    /deep/ .van-tabs__content {
      overflow: initial;
    }

    /deep/ .van-tab {
      flex: none !important;
      -webkit-flex: none !important;
      padding: 0 55rpx 0 10rpx !important;
      color: rgba(61, 61, 61, 0.5) !important;
    }

    /deep/ .van-tabs__wrap::after {
      border: none;
    }

    /deep/ .van-tabs__wrap {
      padding: 0 24rpx;
    }

    /deep/ .van-tabs__line {
      width: 46rpx;
      height: 8rpx;
      background-color: rgba(253, 211, 56, 1);
      border-radius: 78rpx;
      left: -13px !important;
    }

    /deep/ .van-ellipsis {
      font-weight: bold;
      font-size: 32rpx;
      // color: rgba(61, 61, 61, 0.5);
    }

    /deep/ .van-tab--active {
      color: rgba(0, 0, 0, 1) !important;
    }

    .container1 {
      padding-bottom: 120rpx;

      .maxIcon {
        position: fixed;
        z-index: 1;
        top: 80rpx;
        left: 24rpx;
        font-size: 48rpx;
        color: #fff;
      }

      .maxImage {
        position: relative;
        width: 100%;
        height: 550rpx !important;
        overflow: hidden;

        .Image {
          width: 100%;
          // filter: blur(22.2rpx);
        }

        .maxback {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
        }
      }

      .paddingleft {
        padding-left: 24rpx;
        padding-right: 24rpx;
      }

      .userInfo {
        position: relative;
        z-index: 10;
        margin-top: -60rpx;
        background-color: #fff;
        border-top-left-radius: 50rpx;
        border-top-right-radius: 50rpx;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;

        .userInfo_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 48rpx;
          position: relative;
          top: 18rpx;

          .userInfo_box_left {
            position: relative;
            display: flex;
            align-items: center;
            // border-radius: 50%;
            height: 160rpx;

            // height: 100%;
            image {
              width: 208rpx;
              height: 208rpx;
              position: relative;
              border-radius: 50%;
              border: 15rpx solid #fff;
              top: -65rpx;
              // border-radius: 10rpx;
            }

            .minImage {
              position: absolute;
              // bottom: 0;
              top: 69rpx;
              right: 255rpx;
              width: 60rpx;
              height: 60rpx;
              box-sizing: border-box;
              border-radius: 50%;
              border: 2px solid #fff;
            }

            .userInfo_box_left_box {
              display: flex;
              // align-items: center;
              flex-direction: column;
              justify-content: space-around;
              height: 110rpx;
              margin-bottom: 30rpx;
              margin-left: 31rpx;

              h1 {
                color: rgba(61, 61, 61, 1);
                font-size: 40rpx;
              }

              text {
                color: rgba(61, 61, 61, 0.5);
                font-size: 24rpx;
                display: block;
                width: 217rpx;
                line-height: 37rpx;
              }
            }
          }

          .userInfo_box_right {
            width: 128rpx;
            height: 52rpx;
            background-color: rgba(253, 211, 56, 1);
            border-radius: 26.5rpx;
            text-align: center;
            line-height: 52rpx;
            font-size: 26rpx;
            font-weight: 500;
            margin-bottom: 30rpx;
          }

          .userInfo_box_right1 {
            width: 128rpx;
            height: 52rpx;
            background-color: rgba(253, 211, 56, 0.5);
            border-radius: 26.5rpx;
            text-align: center;
            line-height: 52rpx;
            font-size: 26rpx;
            font-weight: 500;
            margin-bottom: 30rpx;
          }

        }

        .userInfo_score {
          // height: 150rpx;
          padding: 0 48rpx;
          display: flex;
          // flex-direction: column;
          justify-content: space-between;
          align-items: center;

          .userInfo_score_left {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;


            h1 {
              color: #3d3d3d;
              font-size: 60rpx;
              line-height: 50rpx;
              font-weight: bold;
            }

            text {
              color: rgba(61, 61, 61, 0.5);
              font-size: 22rpx;
            }
          }

          .userInfo_score_right {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            // align-items: center;

            .userInfo_score_right_top {
              display: flex;
              // flex-direction: column;
              // justify-content: space-around;
              align-items: center;

              /deep/ .van-rate {
                width: 140rpx !important;
              }
            }
          }
        }

        .userInfo_score_text {
          color: rgba(61, 61, 61, 0.5);
          font-size: 28rpx;
          padding: 40rpx 48rpx;
          display: block;
          text-align: right;
          // margin: 30rpx 0;
          border-bottom: 10rpx solid rgba(247, 247, 247, 1);
        }

        .userInfo_review {
          padding-top: 27rpx;

          .userInfo_review_title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            h1 {
              color: rgba(61, 61, 61, 1);
              font-size: 36rpx;
            }

            .userInfo_review_text {
              color: rgba(61, 61, 61, 0.5);
              font-size: 24rpx;

              text {
                display: inline-block;
              }

              .active {
                color: rgba(61, 61, 61, 1) !important;
              }
            }


          }
        }
      }
    }

    .money {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 128rpx;
      padding: 0 24rpx;
      box-shadow: 0px -6rpx 10rpx rgba(0, 0, 0, 0.09);
      background-color: #fff;
      z-index: 999;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      align-items: center;

      .money_left {
        color: rgba(255, 87, 51, 1);
        font-size: 24rpx;
      }

      .money_right {
        width: 222rpx;
        height: 88rpx;
        background-color: rgba(253, 211, 56, 1);
        border-radius: 226rpx;
        text-align: center;
        line-height: 88rpx;
        color: rgba(61, 61, 61, 1);
        font-size: 36rpx;
        font-weight: 500;
      }

      .money_right1 {
        width: 222rpx;
        height: 88rpx;
        background-color: rgba(253, 211, 56, 0.5);
        border-radius: 226rpx;
        text-align: center;
        line-height: 88rpx;
        color: rgba(61, 61, 61, 0.5);
        font-size: 36rpx;
        font-weight: 500;
      }
    }
  }

  .Myactive_box_no {
    // height: 300rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500rpx;

    image {
      width: 264rpx;
      height: 260rpx;
    }

    text {
      color: rgba(61, 61, 61, 0.5);
      font-size: 26rpx;
      margin-top: 30rpx;
    }
  }
</style>
